<script setup lang="ts">
    import {ref} from 'vue'
    import Child1 from './Child1.vue'
    import Child2 from './Child2.vue'
    //父组件的数据=>传给子组件
    let money = ref(1000)
    let age = ref(18)

    let c1 = ref()
    let c2 = ref()

    let d = ref()

    function getCC1(){
        console.log(c1.value.cc1)
        d.value = c1.value.cc1
    }

    function changeAllChild(v:number){
        //console.log(v)//v代表的是所有加了ref属性的子组件
        for(let k in v){
            //console.log(v[k])
            v[k].age++
        }
    }

    function minusMoney(v:number){
        money.value-=v
    }

    defineExpose({minusMoney})

</script>
<template>
    <h1>$refs-父组件-{{ d }},余额:{{ money }}</h1>
    <button @click="getCC1">获取Child1</button>
    <!-- 重点 -->
    <button @click="changeAllChild($refs)">$refs</button>
    <hr>
    <Child1 ref="c1"/>
    <hr>
    <Child2 ref="c2"/>
</template>
<style scoped>
   
</style>